<template>
  <el-button
    plain
    @click="dialogVisible = true"
    style="display: block; width: 800px"
  >
    选择商品属性
  </el-button>
  <el-alert
    title="注意：每次重新选择商品属性，表格数据将会重置"
    type="error"
    :closable="false"
    style="margin-top: 10px; width: 800px"
  />

  <el-dialog
    v-model="dialogVisible"
    title="选择商品属性"
    width="800"
    :before-close="handleClose"
  >
    <el-form label-width="70px" :model="form" ref="ruleFormRef">
      <el-form-item
        style="margin-bottom: 10px"
        v-for="itemAttr in spuCategoryAttrList"
        :label="itemAttr.attrName"
        :prop="`attrCheckList${itemAttr.spuCategoryAttrId}`"
        :rules="[
          {
            required: true,
            message: `请选择${itemAttr.attrName}`,
            trigger: 'blur',
          },
        ]"
      >
        <el-checkbox-group
          v-model="form[`attrCheckList${itemAttr.spuCategoryAttrId}`]"
        >
          <el-checkbox
            v-for="item in itemAttr.attrValueList"
            :label="item"
            :value="item"
          />
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="display: flex; justify-content: end">
        <el-form-item>
          <el-button @click="handleClose">取消</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            确认
          </el-button>
        </el-form-item>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import { generateProductComb } from "../product/utils";
import { FormInstance } from "element-plus/lib/components/form/index.js";

const dialogVisible = ref(false);
const props = defineProps(["spuCategoryAttrList", "submit"]);

// 商品信息表单
const ruleFormRef = ref<FormInstance>();
const form = reactive<any>({});

const handleClose = () => {
  ElMessageBox.confirm("关闭窗口所选数据将不会保存，确认关闭么")
    .then(() => {
      dialogVisible.value = false;
    })
    .catch(() => {
      // catch error
    });
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      const arrays: any[] = [];
      props.spuCategoryAttrList.map((itemAttr: any) => {
        const checkList = form[`attrCheckList${itemAttr.spuCategoryAttrId}`];
        if (checkList && checkList.length) {
          arrays.push({
            key: `attr${itemAttr.spuCategoryAttrId}`,
            checkList: checkList,
          });
        }
      });
      // 生成属性新的table
      const tableData = generateProductComb(arrays);
      props.submit && props.submit({ tableData, formData: form });
      dialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
